<script setup lang="ts">
import { defineEmits, reactive } from 'vue';
import type { PropType } from 'vue'
import { ElInput, ElButton } from "element-plus"
import { Search } from '@vben/icons';
import { $t } from '@vben/locales'
import Dialog from './dialog.vue'

defineOptions({ name: 'Query' });

interface ModelValueType {
  name: string;
}

defineProps({
  modelValue: {
    type: Object as PropType<ModelValueType>,
    required: true
  }
});
const dialogData = reactive({
  dialogVisible: false
})

const onAdd = () => {
  dialogData.dialogVisible = true

}

const onchangeName = () => {
  emit('queryData')
}

const updateList = () => {
  emit('queryData')
}

const emit = defineEmits(['update:modelValue', 'queryData']);

</script>
<template>
  <section>
    <div class="pb-[24px] border-b border-color:#DCDFE6 mb-[16px]">
      <el-input :maxlength="50" v-model="modelValue.name" clearable @change="onchangeName" style="width: 292px"
        :placeholder="$t('paper.searchPaperNameTxt')">
        <template #suffix>
          <Search class="size-5 cursor-pointer" @click="onchangeName"></Search>
        </template>
      </el-input>
    </div>
    <div class="opt">
      <ElButton type="primary" @click="onAdd">{{$t('common.newTxt')}}</ElButton>
    </div>
    <Dialog v-model:model-value="dialogData" @updateList="updateList"></Dialog>
  </section>
</template>
